<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tagify - pupetteer tests</title>
        <meta name="description" content="Converts HTML input/textarea into Tags component">
        <meta name="author" content="Yair Even-Or">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../dist/tagify.css">
        <script src="../dist/tagify.js"></script>

        <style>
            body{ font: 16px Arial; }
            form{
                max-width:600px;
            }

            form > section{ margin-bottom: 2em; }

            .tagify+input, .tagify+textarea {
                position: initial !important;
                left: 0 !important;
                transform: none !important;
                width: 100%;
                margin-top: .2em;
                min-height: 11ch;
                background: powderblue;
                font-family: "Fira Code";
            }

            .tagify{
                margin: .2em;
                min-width: 400px;
            }
        </style>

        <style contenteditable>.customLook{
                --tag-bg                  : #0052BF;
                --tag-hover               : #CE0078;
                --tag-text-color          : #FFF;
                --tags-border-color       : silver;
                --tag-border-radius       : 25px;
                --tag-text-color--edit    : #111;
                --tag-remove-bg           : var(--tag-hover);
                --tag-pad                 : .6em 1em;
                --tag-inset-shadow-size   : 1.35em;
                --tag-remove-btn-bg--hover: black;

                display: inline-block;
                min-width: 0;
                border: none;
            }

            .customLook .tagify__tag{
                margin-top: 0;
            }

            /* Do not show the "remove tag" (x) button when only a single tag remains */
            .customLook .tagify__tag:only-of-type .tagify__tag__removeBtn{
                display: none;
            }

            .customLook .tagify__tag__removeBtn{
                opacity: 0;
                transform: translateX(-6px) scale(.5);
                margin-left: -3ch;
                transition: .12s;
            }

            .customLook .tagify__tag:hover .tagify__tag__removeBtn{
                transform: none;
                opacity: 1;
                margin-left: -1ch;
            }

            .customLook + button{
                color: #0052BF;
                font: bold 1.4em/1.65 Arial;
                border: 0;
                background: none;
                box-shadow: 0 0 0 2px inset currentColor;
                border-radius: 50%;
                width: 1.65em;
                height: 1.65em;
                cursor: pointer;
                outline: none;
                transition: .1s ease-out;
                margin: 0 0 0 5px;
                vertical-align: top;
            }

            .customLook + button:hover{
                box-shadow: 0 0 0 5px inset currentColor;
            }

            .customLook .tagify__input{
                display: none;
            }
        </style>
    </head>

    <body>
    <section>
        <input class='customLook' value='some.name@website.com'><button type="button">+</button>
    </section>

<script>
// generate random whilist items (for the demo)
var randomStringsArr = Array.apply(null, Array(100)).map(function() {
    return Array.apply(null, Array(~~(Math.random() * 10  + 3))).map(function() {
        return String.fromCharCode(Math.random() * (123 - 97) + 97)
    }).join('') + '@gmail.com'
})

// email address validation (https://stackoverflow.com/a/46181/104380)
const pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

var input = document.querySelector('.customLook'),
    tagify = new Tagify(input, {
      pattern,
      whitelist: randomStringsArr,
      callbacks: {
        "invalid": onInvalidTag
      },
      dropdown : {
        position: 'text',
        enabled: 1 // show suggestions dropdown after 1 typed character
      }
    }),
    button = input.nextElementSibling;  // "add new tag" action-button

button.addEventListener("click", onAddButtonClick)

function onAddButtonClick(){
    tagify.addEmptyTag()
}

function onInvalidTag(e){
  console.log("invalid", e.detail)
}
</script>
</body>
</html>